<template>
	<view class="pageItem">
		<view class="main_item">
			<block v-for="(item,index) in list" :key="item.id">
				<view class="row">
					<block v-if="index <= 2">
						<image class="num_img" :src="'/static/img/run_'+index+'.png'" mode="widthFix"></image>
					</block>
					<block v-else>
						<view class="num">{{index+1}}</view>
					</block>
					<image class="u_img" :src="my_img(item.headimg)"></image>
					<view class="u_name">{{item.username}}</view>
					<view class="d_num">{{item.total_money}}</view>
					<image class="d_img" src="/static/other/diamond_mini.png"></image>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				list : [],
				
			};
		},
		onLoad() {
			this.initData();
		},
		methods:{
			my_img(str){
				if(str){
					return this.realUrl(str);
				}else{
					return '/static/my/user_img.png';
				}	
			},
			initData(){
				let url = this.site_url + 'api/index/score_ranking';
				this.areq(url).then(res=>{
					if(res.code == 1){
						this.list = res.data;
					}	
				})
			}
			
			
		}
	}
</script>

<style lang="scss">
.main_item{
	width: 100%;
	padding: 1vw 4% 0;
}
.row{
	width: 100%;
	display: flex;
	align-items: center;
	margin-top: 3vw;
	background: $main_color2_s;
	padding: 2vw;
	border-radius: 2vw;
	.num_img{
		width: 10vw;
		text-align: center;
		margin-left: -1vw;
	}
	.num{
		width: 8vw;
		height: 8vw;
		text-align: center;
		font-size: 3.5vw;
		font-weight: bold;
		color: $main_color;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 1vw;
	}
	.u_img{
		width: 8vw;
		height: 8vw;
		margin-left: 3vw;
	}
	.u_name{
		flex: 1;
		@include text_over_style(1);
		font-size: 4vw;
		color: $main_color5;
		margin-left: 3vw;
	}
	.d_num{
		font-size: 4vw;
		font-weight: bold;
		color: $main_color_s2;
		margin-left: 3vw;
	}
	.d_img{
		width: 4vw;
		height: 4vw;
		margin-left: 1vw;
		margin-top: 1vw;
	}
}
</style>
